<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.5.0.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/bootstrap.min.css">
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="../Vue/axios.js"></script>
    <script src="../Vue/Vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    #batchUpload {
        margin-left: 450px;
    }

    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>
<body>
<div class="container" id="app">
    <h3>上传学生信息</h3>
    <form enctype="multipart/form-data" id="batchUpload" action="" method="post" class="form-horizontal">
        <br>
        <input type="file" name="file" style="width:0px;height:0px;" id="uploadEventFile" @change="cc"><br>
        <input id="uploadEventPath" disabled="disabled" type="text"><br><br>
        <button type="button" class="btn btn-primary btn-xs" style="height:30px;" @click="up">选择学生信息文件
        </button>
        <br><br>
        <select v-model="classId">
            <option value="0" selected="selected">请选择班级</option>
            <option v-for="value in classs" :value="value.teId">{{value.tname}}</option>
        </select><br><br><br>
        <button type="button" class="btn btn-info btn-sm" @click="uploadBtn()">上传</button>
    </form>
</div>
<script>
    //牟强

    var storage = window.localStorage;
    new Vue({
        el: "#app",
        data: {
            classs: [],
            classId: 0
        },
        mounted() {
            var token = storage.getItem("token");
            var refreshToken = storage.getItem("refreshToken");
            console.log(token);
            console.log(refreshToken);
            axios.get("initAddStudent", {headers: {"token": token, "refreshToken": refreshToken}})
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        this.classs = res.data.data;
                        console.log(this.classs);
                    } else if (res.data.code == 302) {
                        window.parent.location.href = "../login.html";
                    }
                });
        },
        methods: {
            up: function () {//点击上传
                console.log("点击文件上传")
                $("#uploadEventFile").click();
            },
            cc: function () {//文件选择后回显文件名到text框
                $("#uploadEventPath").attr("value", $("#uploadEventFile").val());
            },
            uploadBtn: function () {
                var uploadEventFile = $("#uploadEventFile").val();
                if (uploadEventFile == '') {
                    layer.msg("请选择excel,再上传", function () {
                    });
                } else if (uploadEventFile.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                    layer.msg("只能上传Excel文件", function () {
                    });
                } else if (this.classId == 0) {
                    layer.msg("请选择需要录入的学生的班级", function () {
                    });
                } else {
                    var formData = new FormData();   //必须是new FormData后台才能接收到
                    formData.append("filee", $("#uploadEventFile")[0].files[0]);
                    formData.append("classId", this.classId);
                    var token = storage.getItem("token");
                    var refreshtoken = storage.getItem("refreshToken");
                    axios.post("addinfo", formData, {headers: {"token": token, "refreshToken": refreshtoken}})
                        .then(res => {
                                console.log(res.data);
                                if (res.data.code == 302) {
                                    window.parent.location.href = "../login.html";
                                }
                                if (res.headers.token != null) {
                                    //更新本地token
                                    storage.setItem("token", res.headers.token);
                                }
                            }
                        );
                }
            }
        }
    });
</script>
</body>
</html>